<template>
  <!-- 搜索框 -->
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    shape="round"
  >
    <template #action>
      <div @click="onSearch" class="sou">搜索</div>
    </template>
  </van-search>

  <!-- 轮播图 -->
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in lunboArr" :key="image.bannerid">
      <img class="lunbo-item" :src="image.coverImage" />
    </van-swipe-item>
  </van-swipe>

  <!-- 列表 -->
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    :immediate-check="false"
  >
    <!-- 栅格布局24列 -->
    <!-- 设置垂直间距 -->
    <!-- 利用组件 -->
    <van-row :gutter="[20, 20]" class="item-row">
      <van-col
        span="12"
        class="item-col"
        v-for="item in arr"
        :key="item.id"
        :item="item"
        @click="$router.push('/detail?id=' + item.id)"
      >
        <img :src="item.coverImage" alt="" />
        <h4 class="van-ellipsis">{{ item.name }}</h4>
        <h5 class="van-ellipsis">{{ item.price }}</h5>
      </van-col>
    </van-row>
  </van-list>
  <!--  -->
</template>

<script setup>
import { ref } from "vue"
import { useRouter } from "vue-router"
let router = useRouter()
import { bannerRequest } from "@/api/goods"
import { productLoadlist } from "@/api/prolist"

// 轮播图
let lunboArr = ref([])
function lunbo() {
  bannerRequest().then((r) => {
    console.log(r.data)
    lunboArr.value = r.data.data
  })
}
lunbo()

// 商品列表
// 搜索 -- 没有接口
let value = ref("")
function onSearch() {
  console.log("在搜索框输入了", value.value)
  router.push("/search?word=" + value.value)
}
let page = ref(1)
let per = ref(20)
let arr = ref()
productLoadlist(page.value, per.value).then((r) => {
  console.log(r.data.data)
  arr.value = r.data.data
})
</script>

<style lang="css" scoped>
.lunbo-item {
  width: 375px;
}
.list {
  width: 355px;
  margin: 0 auto;
}
.list-item img {
  width: 100%;
}
.swipe-img {
  width: 375px;
}
.item-row {
  width: 355px;
  margin: 0 auto;
}
.item-col img {
  width: 100%;
}
</style>
